<template>
  <aside>
    <!-- 节点属性 -->
    <div>
      <ul>
        <li>
          <label>节点Id</label>
          <Input
            disabled
            v-model="content.id"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>节点类型</label>
          <Input
            disabled
            v-model="content.type"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>节点名称</label>
          <Input
            v-model="content.name"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>

        <li>
          <label>接口开放时间
            <el-tooltip class="item" effect="light" placement="right">
              <template slot="content">
                指定开放时间内，可调用接口
              </template>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </label>
          <el-date-picker
              v-model="content.datetimeRangeValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              style="width: auto;"
          >
          </el-date-picker>
        </li>

        <!--<li>
          <label>数据验证
            <el-tooltip class="item" effect="light" placement="right">
              <template slot="content">
                {"username":"requred"}
              </template>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </label>
          <el-input
            type="textarea"
            :rows="4"
            v-model="content.httpHeader"
            style="width: 100%"
          />
        </li>-->

        <li>
          <label>节点描述</label>
          <el-input
                  type="textarea"
                  :rows="2"
                  v-model="content.description"
                  style="width: 100%"
          />
        </li>
      </ul>
    </div>
  </aside>
</template>

<script>
export default {
  name: "InJdbcAttr",
  props: {
    selectContent:Object
  },
  data() {
    return {
      content: {},
      type: "",
      jspInit: this.$store.state.taskflow.jspInit,
    };
  },
  watch:{
    selectContent: {
      handler(nval) {
        if (!nval) {
          return
        }
        this.content = nval.data;
        this.type = nval.type;
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
  },
};
</script>

<style scoped lang="scss">
aside {
  padding: 10px;
  ul {
    list-style: none;
    li {
      margin-bottom: 5px;
      > label {
        display: block;
        font-size: 15px;
        font-weight: normal;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
